<script lang="ts" setup>
import { computed, inject, ref } from 'vue';

interface Props {
	value?: string | number;
}

defineOptions({
	options: {
		virtualHost: true
	}
});

const props = defineProps<Props>();
// const radioGroupProps = inject<any>('radioGroupProps');
const setValue = inject('setValue', Function.prototype);
const emit = defineEmits(['change']);
const checked = ref(false);

const classNames = computed(() => {
	return {
		'x-radio': true
		// 'x-radio-checked': radioGroupProps.modelValue === props.value
	};
});

function handleSelect() {
	setValue(props.value);
	checked.value = !checked.value;
	emit('change', { checked: checked.value, value: props.value });
}
</script>

<template>
	<view :class="classNames">
		<checkbox value="1" style="transform: scale(0.6)" @tap="handleSelect"></checkbox>
		<slot></slot>
	</view>
</template>

<style lang="scss" scoped>
.x-radio {
	display: flex;
	font-size: 26rpx;
	text-align: center;
	border-right: 1rpx solid #cecece;

	&:last-child {
		border: none;
	}

	&-checked {
		color: #fff;
		background-color: #000a7b;
	}
}
</style>
